<div class="container">
  <nav class="header-nav navbar navbar-expand-md navbar-dark light-dark">
    <div class="header-logo navbar-brand">
      {{ with .Site.GetPage "home" }}
        <a class="float-left" href="{{ .Permalink }}">
      {{ end }}
        {{ with .Site.Params.siteLogoImage }}
        <img class="mr20 header-logo-image" src="{{ . | absURL }}" alt="logo">
        {{ end }}
        {{ if .Site.Params.logoTitle }}
          {{ .Site.Params.logoTitle | safeHTML }}
        {{ else }}
          {{ .Site.Title }}
        {{ end }} 
      </a>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="nav-menu collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        {{ range $index, $menuItem := .Site.Menus.main }}
          <li class="nav-item">
            {{ with $menuItem.Page }}
              <a class="nav-link" href="{{ .Permalink }}">{{ with $menuItem.Pre }}{{ . | safeHTML }}{{ end }}{{ $menuItem.Name }}</a>
            {{ else }}
              {{ if hasPrefix .URL "http" }}
                <a class="nav-link" href="{{ .URL | safeURL }}">{{ with $menuItem.Pre }}{{ . | safeHTML }}{{ end }}{{ $menuItem.Name }}</a>
              {{ else }}
                <a class="nav-link" href="{{ .URL | absLangURL | safeURL }}">{{ with $menuItem.Pre }}{{ . | safeHTML }}{{ end }}{{ $menuItem.Name }}</a>
              {{ end }}
            {{ end }}
          </li>
        {{ end }}
        {{ if and (gt (len .Site.Home.AllTranslations) 1) (.Site.Params.showMenuLanguages | default false ) }}
          {{- $.Scratch.Set "language" .Language -}}
          {{ range .Site.Home.AllTranslations }}
          {{ if ne ($.Scratch.Get "language") .Language }}
            <li class="nav-item">
              <a class="nav-link" href="{{ .Permalink }}"><i class="fas fa-globe"></i> {{ .Language.LanguageName }}</a>
            </li>
          {{ end }}
          {{ end }}
        {{ end }}
      </ul>
    </div>
  </nav>
</div>
